<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>

    <link rel="stylesheet" href="./js/lib/bootstrap-4.6.2/css/bootstrap.min.css">

    <link rel="stylesheet" href="./styles/base.css">
    <link rel="stylesheet" href="./styles/common.css">
    <link rel="stylesheet" href="./styles/user-center.css">

    <script src="./js/lib/jquery-3.7.1.min.js"></script>
    <script src="./js/lib/bootstrap-4.6.2/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="home-container">
        <!-- 头部 -->
        <!-- 导航头 -->
        <div class="wrap-bar">
            <!-- 内容版心区域 -->
            <div class="layout-1226 welcome-wrap">
                <!-- 欢迎语 -->
                <div class="welcome-word">
                    你好，欢迎来到辉光网络
                </div>
                <!-- 右侧用户 -->
                <div class="bar-user">
                    <a href="">登录</a>
                    <a href="">注册</a>
                    <a href="">个人中心</a>
                </div>
            </div>
        </div>

        <!-- 固定菜单 -->
        <div class="home-tool-bar">
            <div class="top-title">快捷导航</div>
            <div class="tool-list">
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_01.png" class="static">
                    <span class="tool-title">购物车</span>
                </a>
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_02.png" class="static">
                    <span class="tool-title">我要出售</span>
                </a>
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_03.png" class="static">
                    <span class="tool-title">投诉售后</span>
                </a>
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_04.png" class="static">
                    <span class="tool-title">帮助中心</span>
                </a>
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_05.png" class="static">
                    <span class="tool-title">微信咨询</span>
                </a>
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_06.png" class="static">
                    <span class="tool-title">在线咨询</span>
                </a>
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_07.png" class="static">
                    <span class="tool-title">商务合作</span>
                </a>
            </div>
        </div>
        <div class="layout-1226">
            <div class="wrap-header">
                <!-- logo -->
                <a href="javaScript:;">
                    <img src="/images/logo-hg.jpg" alt="huiguang">
                </a>
                <!-- 搜索框 -->
                <div class="wrap-select">
                    <div class="input-group">
                        <select class="form-control">
                            <option selected>王者荣耀</option>
                            <option value="1">逆水寒</option>
                            <option value="2">绝地求生</option>
                            <option value="3">我的世界</option>
                        </select>
                        <input type="text" class="form-control" placeholder="请搜索你喜欢的游戏..." />
                        <div class="input-group-append">
                            <button type="button" class="btn btn-primary">搜索</button>
                        </div>
                    </div>
                    <div class="hot-game d-flex">
                        <span>热门游戏：</span>
                        <ul class="d-flex">
                            <li>穿越火线</li>
                            <li>枪战王者</li>
                            <li>王者荣耀</li>
                            <li>地下城与勇士</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 导航栏 -->
            <div class="nav-wrap">
                <ul>
                    <li>
                        <a href="javaScript:;">
                            <span>首页</span>
                        </a>
                    </li>
                    <li>
                        <a href="javaScript:;">
                            <span>我要买号</span>
                        </a>
                    </li>
                    <li>
                        <a href="javaScript:;">
                            <span>我要卖号</span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="javaScript:;">
                            <span>个人中心</span>
                        </a>
                    </li>
                    <li>
                        <a href="javaScript:;">
                            <span>联系我们</span>
                        </a>
                    </li>
                    <li>
                        <a href="javaScript:;">
                            <span>帮助中心</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 内容主体 -->
            <div class="nav-link">
                <span>您的位置：</span>
                <span><a href="#">首页 > </a></span>
                <span><a href="#" class="current">个人中心</a></span>
            </div>
            <div class="main-content">
                <div class="left-panel">
                    <div class="accordion" id="accordionExample">
                        <div class="card">
                            <div class="card-header" id="headingOne">
                                <span data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
                                    aria-controls="collapseOne">
                                    我的账户
                                </span>
                            </div>
                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                data-parent="#accordionExample">
                                <ul class="nav-list">
                                    <li class="current">个人资料</li>
                                    <li>修改密码</li>
                                    <li>换绑手机</li>
                                    <li>实名认证</li>
                                    <li>我的收藏</li>
                                </ul>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingTwo">
                                <span data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false"
                                    aria-controls="collapseTwo">
                                    联系我们
                                </span>
                            </div>
                            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                data-parent="#accordionExample">
                                <ul class="nav-list">
                                    <li>在线客服</li>
                                    <li>投诉售后</li>
                                    <li>商务合作</li>
                                </ul>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingThree">
                                <span data-toggle="collapse" data-target="#collapseThree" aria-expanded="false"
                                    aria-controls="collapseThree">
                                    帮助中心
                                </span>
                            </div>
                            <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
                                data-parent="#accordionExample">
                                <ul class="nav-list">
                                    <li>公告列表</li>
                                    <li>隐私政策</li>
                                    <li>账号交易业务</li>
                                    <li>企业介绍</li>
                                    <li>黑号查询</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right-panel">
                    <div class="header">
                        <img src="./images/userinfo_me.png" alt="">
                        <span class="nav-title">个人资料</span>
                    </div>
                    <div class="content">
                        <!-- 个人资料 -->
                        <div class="nav-content" style="display: block">
                            <div class="user-info">
                                <form class="needs-validation" novalidate>
                                    <div class="form-group avatar-line">
                                        <div class="form-inline row">
                                            <label class="col-sm-2 col-form-label">头像：</label>
                                            <img src="./images/user.png" alt="" id="avatar">
                                            <small class="text-muted col-sm-4">
                                                仅支持JPG、PNG、JPEG格式
                                            </small>
                                        </div>
                                        <input type="file" id="file" onchange="preview(this)">
                                    </div>
                                    <div class="form-group form-row form-inline">
                                        <label for="userID" class="col-sm-2 col-form-label">用户ID：</label>
                                        <input type="text" class="col-sm-5 form-control" id="userID"
                                            placeholder="请输入用户ID" required>
                                        <div class="invalid-feedback">请输入用户ID</div>
                                    </div>
                                    <div class="form-group form-row form-inline">
                                        <label for="phone" class="col-sm-2 col-form-label">手机号：</label>
                                        <input type="text" class="col-sm-5 form-control" id="phone" placeholder="请输入手机号"
                                            required>
                                        <div class="invalid-feedback">请输入手机号</div>
                                    </div>
                                    <div class="form-group form-row form-inline">
                                        <label for="userName" class="col-sm-2 col-form-label">昵称：</label>
                                        <input type="text" class="col-sm-5 form-control" id="userName"
                                            placeholder="请输入个人昵称" required>
                                        <small class="text-muted col-sm-4">
                                            3-15个字符之间
                                        </small>
                                        <div class="invalid-feedback">请输入个人昵称</div>
                                    </div>
                                    <div class="form-group form-row form-inline">
                                        <label for="qq" class="col-sm-2 col-form-label">联系QQ：</label>
                                        <input type="text" class="col-sm-5 form-control" id="qq"
                                            placeholder="请输入可以联系的QQ号" required>
                                        <div class="invalid-feedback">请输入可以联系的QQ号</div>
                                    </div>
                                    <div class="form-group form-row form-inline">
                                        <label for="wechat" class="col-sm-2 col-form-label">联系微信：</label>
                                        <input type="text" class="col-sm-5 form-control" id="wechat"
                                            placeholder="请输入可以联系的微信号" required>
                                        <div class="invalid-feedback">请输入可以联系的微信号</div>
                                    </div>
                                    <div class="form-group btn-box">
                                        <button type="submit" class="btn btn-primary mr-4">提交</button>
                                        <button type="button" class="btn btn-outline-dark">取消</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- 修改密码 -->
                        <div class="nav-content">
                            <div class="user-info">
                                <form class="needs-validation" novalidate>
                                    <div class="form-group form-row form-inline">
                                        <label for="phone" class="col-sm-2 col-form-label">手机号：</label>
                                        <input type="text" class="col-sm-5 form-control" id="phone" placeholder="请输入手机号"
                                            required>
                                        <div class="invalid-feedback">请输入手机号</div>
                                    </div>
                                    <div class="form-group form-row form-inline">
                                        <label for="code" class="col-sm-2 col-form-label">手机验证码：</label>
                                        <div class="input-group col-sm-5">
                                            <input type="text" class="form-control" id="code" placeholder="请输入手机验证码"
                                                required>
                                            <div class="input-group-append">
                                                <button class="btn btn-primary">发送验证码</button>
                                            </div>
                                            <div class="invalid-feedback">请输入手机验证码</div>
                                        </div>
                                    </div>
                                    <div class="form-group form-row form-inline">
                                        <label for="password" class="col-sm-2 col-form-label">新密码：</label>
                                        <input type="password" class="col-sm-5 form-control" id="password"
                                            placeholder="请输入新密码" required>
                                        <small class="text-muted col-sm-4">
                                            输入6位以上数字加字母新密码
                                        </small>
                                        <div class="invalid-feedback">请输入新密码</div>
                                    </div>
                                    <div class="form-group form-row form-inline">
                                        <label for="repassword" class="col-sm-2 col-form-label">确认密码：</label>
                                        <input type="password" class="col-sm-5 form-control" id="repassword"
                                            placeholder="请输入确认密码" required>
                                        <div class="invalid-feedback">请输入确认密码</div>
                                    </div>
                                    <div class="form-group btn-box">
                                        <button type="submit" class="btn btn-primary">提交</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- 换绑手机 -->
                        <div class="nav-content">
                            <div class="user-info">
                                <form class="needs-validation" novalidate>
                                    <div class="form-group form-row form-inline">
                                        <label for="phone" class="col-sm-2 col-form-label">旧手机号：</label>
                                        <input type="text" class="col-sm-5 form-control" id="phone"
                                            placeholder="请输入旧手机号" required>
                                        <div class="invalid-feedback">请输入旧手机号</div>
                                    </div>
                                    <div class="invalid-feedback">请输入旧手机号</div>
                                    <div class="form-group form-row form-inline">
                                        <label for="newphone" class="col-sm-2 col-form-label">新手机号：</label>
                                        <input type="text" class="col-sm-5 form-control" id="newphone"
                                            placeholder="请输入新手机号" required>
                                        <div class="invalid-feedback">请输入新手机号</div>
                                    </div>
                                    <div class="form-group form-row form-inline">
                                        <label for="code" class="col-sm-2 col-form-label">手机验证码：</label>
                                        <div class="input-group col-sm-5">
                                            <input type="text" class="form-control" id="code" placeholder="请输入手机验证码"
                                                required>
                                            <div class="input-group-append">
                                                <button class="btn btn-primary">发送验证码</button>
                                            </div>
                                            <div class="invalid-feedback">请输入手机验证码</div>
                                        </div>
                                    </div>
                                    <div class="form-group btn-box">
                                        <button type="submit" class="btn btn-primary">提交</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- 实名认证 -->
                        <div class="nav-content">
                            <div class="user-info">
                                <form class="needs-validation" novalidate>
                                    <div class="form-group form-row form-inline">
                                        <label for="userName" class="col-sm-2 col-form-label">真实姓名：</label>
                                        <input type="text" class="col-sm-5 form-control" id="userName"
                                            placeholder="请输入真实姓名" required>
                                            <small class="text-muted text-red col-sm-4">
                                                *认证姓名与收款账户的开户名必须—致
                                            </small>
                                        <div class="invalid-feedback">请输入真实姓名</div>
                                    </div>
                                    <div class="form-group form-row form-inline">
                                        <label for="idNum" class="col-sm-2 col-form-label">身份证号：</label>
                                        <input type="text" class="col-sm-5 form-control" id="idNum"
                                            placeholder="请输入身份证号" required>
                                        <div class="invalid-feedback">请输入身份证号</div>
                                    </div>
                                    <div class="form-group form-row form-inline">
                                        <label for="phone" class="col-sm-2 col-form-label">联系电话：</label>
                                        <input type="text" class="col-sm-5 form-control" id="phone"
                                            placeholder="请输入联系电话" required>
                                        <div class="invalid-feedback">请输入联系电话</div>
                                    </div>
                                    <div class="form-group form-row form-inline">
                                        <label for="father" class="col-sm-2 col-form-label">父亲姓名和电话：</label>
                                        <input type="text" class="col-sm-5 form-control" id="father"
                                            placeholder="请输入父亲姓名" required>
                                        <input type="text" class="col-sm-5 form-control" placeholder="请输入父亲电话" required>
                                        <div class="invalid-feedback">请输入父亲姓名和电话</div>
                                    </div>
                                    <div class="form-group form-row form-inline">
                                        <label for="mather" class="col-sm-2 col-form-label">母亲姓名和电话：</label>
                                        <input type="text" class="col-sm-5 form-control" id="mather"
                                            placeholder="请输入母亲姓名" required>
                                        <input type="text" class="col-sm-5 form-control" placeholder="请输入母亲电话" required>
                                        <div class="invalid-feedback">请输入母亲姓名和电话</div>
                                    </div>
                                    <div class="form-group form-row form-inline">
                                        <label for="code" class="col-sm-2 col-form-label">手机验证码：</label>
                                        <div class="input-group col-sm-5">
                                            <input type="text" class="form-control" id="code" placeholder="请输入手机验证码"
                                                required>
                                            <div class="input-group-append">
                                                <button class="btn btn-primary">发送验证码</button>
                                            </div>
                                            <div class="invalid-feedback">请输入手机验证码</div>
                                        </div>
                                    </div>
                                    <div class="form-group form-row form-inline">
                                        <label for="upload-input" class="col-sm-2 col-form-label">近期网购订单截图：</label>
                                        <div class="upload-files">
                                            <div class="upload-dragger">
                                                <!-- 阿里巴巴矢量图标库复制 -->
                                                <svg class="upload-icon" viewBox="0 0 1024 1024" width="40" height="40">
                                                    <path d="M815.104 363.008a307.2 307.2 0 0 0-606.72 0A256 256 0 0 0 256 870.4h204.8v-204.8H358.4l153.6-204.8 153.6 204.8h-102.4v204.8h204.8a256 256 0 0 0 47.104-507.392z" fill="#8a8a8a"></path>
                                                </svg>
                                                <span class="upload-text">点击上传</span>
                                                <span class="upload-text">或将文件拖到此处</span>
                                            </div>
                                            <input type="file" id="upload-input" multiple accept="image/*">
                                        </div>
                                        <small class="text-muted text-red" style="padding-left: 130px;">
                                            *已完成的网购订单截图(必须包含收货人和地址信息,淘宝、京东、拼多多等)
                                        </small>
                                    </div>
                                    <div class="form-group btn-box">
                                        <button type="submit" class="btn btn-primary">提交认证</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- 我的收藏 -->
                        <div class="nav-content">
                            <div class="user-info">
                                <div class="top">
                                    <div class="top-left">
                                        <span class="sort">商品信息</span>
                                    </div>
                                    <div class="top-right">
                                        <span class="add-time">上架时间</span>
                                        <span class="status">状态</span>
                                        <span class="action">操作</span>
                                    </div>
                                </div>
                                <ul class="game-list">
                                    <li class="game-item">
                                        <div class="game-item-left">
                                            <img src="./images/game01.jpeg">
                                            <div>
                                                <a href="javaScript:;" class="game-title t-ellipsis-2">
                                                    【辽宁大区-北部】【可二次】【穿越火线】【辽宁大区-北部】战区:北部战区/游戏大区:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:
                                                </a>
                                                <div class="d-flex">
                                                    <span class="price mr-5">￥99999</span>
                                                    <div class="area">
                                                        游戏区服：
                                                        <span>天涯明月刀-青龙乱舞长生剑</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="time">2023-11-13 12:34:43</div>
                                        <div class="status">在售</div>
                                        <div class="right-box">
                                            <button class="btn btn-outline-primary mb-1 btn-sm">取消收藏</button>
                                            <button class="btn btn-danger btn-sm">立即购买</button>
                                        </div>
                                    </li>
                                    <li class="game-item">
                                        <div class="game-item-left">
                                            <img src="./images/game01.jpeg">
                                            <div>
                                                <a href="javaScript:;" class="game-title t-ellipsis-2">
                                                    【辽宁大区-北部】【可二次】【穿越火线】【辽宁大区-北部】战区:北部战区/游戏大区:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:
                                                </a>
                                                <div class="d-flex">
                                                    <span class="price mr-5">￥99999</span>
                                                    <div class="area">
                                                        游戏区服：
                                                        <span>天涯明月刀-青龙乱舞长生剑</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="time">2023-11-13 12:34:43</div>
                                        <div class="status">在售</div>
                                        <div class="right-box">
                                            <button class="btn btn-outline-primary mb-1 btn-sm">取消收藏</button>
                                            <button class="btn btn-danger btn-sm">立即购买</button>
                                        </div>
                                    </li>
                                    <li class="game-item">
                                        <div class="game-item-left">
                                            <img src="./images/game01.jpeg">
                                            <div>
                                                <a href="javaScript:;" class="game-title t-ellipsis-2">
                                                    【辽宁大区-北部】【可二次】【穿越火线】【辽宁大区-北部】战区:北部战区/游戏大区:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:
                                                </a>
                                                <div class="d-flex">
                                                    <span class="price mr-5">￥99999</span>
                                                    <div class="area">
                                                        游戏区服：
                                                        <span>天涯明月刀-青龙乱舞长生剑</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="time">2023-11-13 12:34:43</div>
                                        <div class="status">已下架</div>
                                        <div class="right-box">
                                            <button class="btn btn-outline-primary mb-1 btn-sm">取消收藏</button>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- 在线客服 -->
                        <div class="nav-content">
                            <div class="label-title">
                                <span>买号卖号请联系</span>
                                <img src="./images/shouzhi.png" alt="">
                            </div>
                            <div class="contact-box">
                                <div class="label-title-two">
                                    CF端游/手游
                                </div>
                                <ul class="contact-list row">
                                    <li class="col-4">
                                        <div class="contact-item">
                                            <div class="contact-title">
                                                客服1
                                            </div>
                                            <img src="./images/wechat-pic.png">
                                            <div class="contact-title">
                                                微信号:GW1024
                                            </div>
                                            <button class="btn btn-danger btn-sm">复制号码</button>
                                        </div>
                                    </li>
                                    <li class="col-4">
                                        <div class="contact-item">
                                            <div class="contact-title">
                                                客服2
                                            </div>
                                            <img src="./images/wechat-pic.png">
                                            <div class="contact-title">
                                                微信号:GW1024
                                            </div>
                                            <button class="btn btn-danger btn-sm">复制号码</button>
                                        </div>
                                    </li>
                                    <li class="col-4">
                                        <div class="contact-item">
                                            <div class="contact-title">
                                                客服3
                                            </div>
                                            <img src="./images/wechat-pic.png">
                                            <div class="contact-title">
                                                微信号:GW1024
                                            </div>
                                            <button class="btn btn-danger btn-sm">复制号码</button>
                                        </div>
                                    </li>

                                </ul>
                                <div class="label-title-two">
                                    其它手游
                                </div>
                                <ul class="contact-list row">
                                    <li class="col-4">
                                        <div class="contact-item">
                                            <div class="contact-title">
                                                客服1
                                            </div>
                                            <img src="./images/wechat-pic.png">
                                            <div class="contact-title">
                                                微信号:GW1024
                                            </div>
                                            <button class="btn btn-danger btn-sm">复制号码</button>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- 投诉售后 -->
                        <div class="nav-content">
                            <div class="user-info tssh">
                                <div class="ts-title">投诉建议</div>
                                <div class="ts-label">特别提醒：</div>
                                <div class="ts-desc">
                                    所有投诉渠道都是有效的人工接待，若单一渠道的工作人员长时间未作应答，烦请致电投诉电话，所有的投诉建议都会视具体情况需要一个处理周期，您的建议是我们进步的动力!
                                </div>
                                <div class="ts-title2">投诉与售后请微信扫码添加客服</div>
                                <ul class="contact-list row">
                                    <li class="col-4">
                                        <div class="contact-item">
                                            <div class="contact-title">
                                                客服1
                                            </div>
                                            <img src="./images/wechat-pic.png">
                                            <div class="contact-title">
                                                微信号:GW1024
                                            </div>
                                            <button class="btn btn-danger btn-sm">复制号码</button>
                                        </div>
                                    </li>
                                    <li class="col-4">
                                        <div class="contact-item">
                                            <div class="contact-title">
                                                客服1
                                            </div>
                                            <img src="./images/wechat-pic.png">
                                            <div class="contact-title">
                                                微信号:GW1024
                                            </div>
                                            <button class="btn btn-danger btn-sm">复制号码</button>
                                        </div>
                                    </li>
                                </ul>
                                <div class="contact-box">
                                    <div>
                                        <img src="./images/tel_03.png" alt="">
                                        <span>15050014535</span>
                                    </div>
                                    <div>
                                        <img src="./images/email.png" alt="">
                                        <span>jshuiguangwl@163.com</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 商务合作 -->
                        <div class="nav-content">
                            <div class="swhz">
                                <div class="swhz-title">投诉建议</div>
                                <div class="swhz-desc">
                                    本平台已有多家商户入驻，现开始对外招商，有充足号量的商户们都可以加盟本平台，成为本平台的优选商家账户，对外我们实行api平台接口对接，已经跟多个行业领域的头部平台完成了api接口对接，达成了平台之间的相互合作，现欢迎各位来入驻本平台，让我们携手共同打造一个优质的账号交易市场。期待与您的合作!
                                </div>
                                <div class="swhz-depart">
                                    ———辉光商务
                                </div>
                                <div class="swhz-botttom">
                                    <div class="left">
                                        <div class="left-title">
                                            了解请加微信
                                        </div>
                                        <img src="./images/wechat-pic.png">
                                    </div>
                                    <div class="right">
                                        <div>
                                            <img src="./images/wechat_02.png" alt="">
                                            <span>GW350962</span>
                                            <button class="btn btn-primary btn-sm">点击复制</button>
                                        </div>
                                        <div>
                                            <img src="./images/qq_02.png" alt="">
                                            <span>475780583</span>
                                            <button class="btn btn-primary btn-sm">点击复制</button>
                                        </div>
                                        <div>
                                            <img src="./images/tel_01.png" alt="">
                                            <span>15050014525</span>
                                            <button class="btn btn-primary btn-sm">点击复制</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 公告列表 -->
                        <div class="nav-content">
                            <div class="gglb">
                                <ul>
                                    <li>
                                        <img src="./images/notice_02.png" alt="">
                                        <div class="title"><a href="#">禁止未成年人使用本平台服务</a></div>
                                        <div class="time">2023-12-10</div>
                                        <div class="btn-box">
                                            <button class="btn btn-warning btn-sm">查看</button>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="./images/notice_02.png" alt="">
                                        <div class="title"><a href="">分期业务咨询</a></div>
                                        <div class="time">2023-12-10</div>
                                        <div class="btn-box">
                                            <button class="btn btn-warning btn-sm">查看</button>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="./images/notice_02.png" alt="">
                                        <div class="title"><a href="">谨防不法分子冒充客服名义实施诈骗行为的特别提醒</a></div>
                                        <div class="time">2023-12-10</div>
                                        <div class="btn-box">
                                            <button class="btn btn-warning btn-sm">查看</button>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="./images/notice_02.png" alt="">
                                        <div class="title"><a href="">如何识别企业客服真伪(科普贴)</a></div>
                                        <div class="time">2023-12-10</div>
                                        <div class="btn-box">
                                            <button class="btn btn-warning btn-sm">查看</button>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- 隐私政策 -->
                        <div class="nav-content">
                            <h2>隐私政策</h2>
                        </div>
                        <!-- 账号交易业务 -->
                        <div class="nav-content">
                            <div class="zhjy">
                                <div class="zhjy-title">
                                    <span>交易流程</span>
                                    <img src="./images/right-jt.png" alt="">
                                </div>
                                <div class="flow">
                                    <img src="./images/flow.png" alt="">
                                </div>
                                <div class="zhjy-title">
                                    <span>交易必看</span>
                                    <img src="./images/right-jt.png" alt="">
                                </div>
                                <div class="zhjy-desc">
                                    <p>
                                        1.卖家<span>在螃蟹平台出售游戏账号必须签署电子合同</span>才能进行放款(签署合同时需要提供相关个人信息材料,包括但不限于:身份信息)。友情提醒:支付宝账号到账较快,微信、银行卡到账较慢。
                                    </p>
                                    <p>
                                        2.<span>出售游戏账号发生恶意找回,螃蟹游戏服务网有权提供相关资料,协助有关部门追回损失;</span>,若您拒绝配合将按本人找回处理;若您能提供有效的首任卖家具体信息与交易凭证（包括但不限于卖家收款记录,订单详情,聊天记录),平台未追回产生的损失与您无关。
                                    </p>
                                    <p>
                                        3.买家下单<span>进行账号交易时需支付全额价款,不接受预定金或口头预留等方式</span>。
                                    </p>
                                    <p>
                                        4.交易过程中,请勿出现恶意辱骂,恶意行骗、引导站外等现象,否则平台有权限制您的账号权限,并视情况封禁账号。5.交易前有任何疑问,请提前咨询客服,<span>开始交易即视为认同螃蟹游戏服务平台所有规则,最终解释权归金华市博淳网络科技有限公司所有。</span>
                                    </p>
                                </div>
                                <div class="zhjy-title">
                                    <span>交易必看</span>
                                    <img src="./images/right-jt.png" alt="">
                                </div>
                                <div class="zhjy-desc">
                                    <span class="info">
                                        <img src="./images/zhu.png" alt="" class="ml-2 mr-2">
                                        确认验号无误后即为确认交易进入换绑阶段</span>
                                    <p>
                                        1.<span>验号无误前双方都可无责取消，确认验号无误后即为确认交易不接受任何理由取消</span>，若因个人原因取消交易，需支付订单金额5%违约金，守约方、平台各半收取。
                                    </p>
                                    <span class="info">
                                        PS:若卖家违约，拒不支付违约金，将对该账号及该用户多平台拉黑下架。
                                    </span>
                                    <p>
                                        2.<span>账号进入换绑交接验证码及进入审核后(包含游戏换绑审核期，挂IP等情况)，不接受单方面赔付违约金取消，需买卖双方协商处理</span>，平台不参与判定责任，最终处理以双方协商一致结果为准，若因游戏厂商原因首次换绑失败，买卖双方需配合平台引导进行账号交付，以顺利交付为主，若确实无法进行换绑交付，将按平台方案进行取消订单。
                                    </p>
                                    <p>
                                        3.<span>下单后订单（账号换绑审核期、挂IP等情况除外〕理论交易时长为24小时内</span>，(具体等待交易时长可由双方协定)，如双方无法协定一致将按平台判定方案进行，<span>需要在等待交易时长内回应配合交付。如超出理论时长或协定时长，按违约处理</span>。
                                    </p>
                                    <p>
                                        4.交易期间发现黑号记录，经证实后，可取消交易，各方均不承担任何责任。
                                    </p>
                                    <p>
                                        5.<span>交易期间出现毁号，行骗等一切不利于账号的行为，属于侵权行为，若出现纠纷，按买卖双方协商一致结果处理，无法达成一致可通过司法介入，平台配合协助处理，不参与判定责任</span>。
                                    </p>
                                    <p>
                                        6.双方个人承诺等情形，不在平台担保范围之内请理性判断，出现任何风险与损失由您自己承担，平台只针对账号找回，人脸包赔等增值业务进行担保。
                                    </p>
                                </div>
                                <div class="zhjy-title">
                                    <span>买家须知</span>
                                    <img src="./images/right-jt.png" alt="">
                                </div>
                                <div class="zhjy-desc">
                                    <p>
                                        1.如您个人原因不具备验号条件或换绑条件，先由买卖双方协商处理，如双方无法协定一致将按平台判定方案进行。
                                    </p>
                                    <p>
                                        2.商品<span>交易过程中请勿私自修改账号资料，以免造成锁定、冻结无法登录等账号异常情况，否则造成的损失须由您个人承担。</span>
                                    </p>
                                    <p>
                                        3.账号<span>交易期间及换绑完成后24小时内建议您不要对该账号进行任何形式的充值消费及消耗道具资源等，否则引起的一切纠纷由您自己承担。</span>
                                    </p>
                                    <p>
                                        4.因虚拟物品交易特殊性，交易完成的订单不支持退换。
                                    </p>
                                    <p>
                                        5.为保障您的权益，商品交易须签署合同，如您选择不签署合同或账号已完成交付情况下失联超出1小时,订单成交后将为您生成《交易证明》，但产生风险由您自己承担。
                                    </p>
                                    <p>
                                        6.卖家交付商品后，需要您及时确认收货。卖家交付后指定时间内买家未确认收货，系统将自动确认收货，后续若有损失或交易纠纷，由您自行承担。
                                    </p>
                                    <p>
                                        7.账号购买后请您正确使用帐号，禁止用于博彩、诈骗、洗钱、传播淫秽视频、发布反动言论等违法犯罪行为，否则会被公安机关追究刑事责任。
                                    </p>
                                </div>
                                <div class="zhjy-title">
                                    <span>卖家须知</span>
                                    <img src="./images/right-jt.png" alt="">
                                </div>
                                <div class="zhjy-desc">
                                    <p>
                                        <span>1.为保障您的权益，商品换绑后必须签署合同，平台才能根据提交的收款账户进行放款，请持续保持在线，如账号已换绑给买家情况下，签署合同环节失联，账号将由买家游玩，未及时上线签署合同，没有完成交易出现纠纷或损失自行承担。</span>
                                    </p>
                                    <p>
                                        2.若您的游戏账号在多个平台寄售，请保持寄售价格一致，否则账号会被下架;若同一账号多次下单后无理由不交付，默认您有违诚信，平台会下架并联系其他平台拉黑处理该账号。若您寄售的游戏账号在其他地方已出或者不再继续寄售，请务必告知，避免不必要的纠纷。
                                    </p>
                                    <p>
                                        3.您若拿不合法账号(骗取或本人恶意找回)来螃蟹游戏服务网或者其他平台寄售，螃蟹游戏服务网会对该账号进行拉黑下架处理，并保留追究法律责任的权利。
                                    </p>
                                    <p>
                                        <span>4.如账号有无法换绑，无法改密等情况交易前或进入交易组后及时告知客服，交付过程出现无法改密等情况导致交付失败，账号安全问题由卖家自行承担。</span>
                                    </p>
                                </div>
                                <span class="info">
                                    <img src="./images/zhu.png" alt="" class="ml-2 mr-2">
                                    本平台只为年满18周岁的成年人提供账号交易，如果您是未成年擅自使用成年家属身份交易的，视为成年家属自己的行为。</span>
                            </div>
                        </div>
                        <!-- 企业介绍 -->
                        <div class="nav-content">
                            企业介绍
                        </div>
                        <!-- 黑号查询 -->
                        <div class="nav-content">
                            <div class="hhcx">
                                <div class="search-select">
                                    <div class="input-group">
                                        <input type="text" class="form-control" placeholder="请输入要查询的游戏账号" />
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-primary">查询</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="search-result error">
                                    <div class="top">
                                        <div>账号：
                                            <span>2346234234</span>
                                        </div>
                                        <div>查询时间：
                                            <span>2023-11-1412:34:32</span>
                                        </div>
                                    </div>
                                    <div class="res-desc error">经查询，该账号为黑号，交易风险较高!</div>
                                    <div class="reason">拉黑原因：
                                        <span>多次找回，拒不处理</span>
                                    </div>
                                    <div class="time">拉黑时间：
                                        <span>2023-05-12 23:34:34</span>
                                    </div>
                                </div>

                                <div class="search-result success">
                                    <div class="top">
                                        <div>账号：
                                            <span>2346234234</span>
                                        </div>
                                        <div>查询时间：
                                            <span>2023-11-1412:34:32</span>
                                        </div>
                                    </div>
                                    <div class="res-desc success">经查询，该账号无拉黑记录，可放心交易!</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部 -->
            <div class="site-footer">
                <div class="layout-1226">
                    <div class="footer-service">
                        <ul>
                            <li>
                                <img src="./images/aq.png" alt="">
                                <div class="right">
                                    <h3>诚信安全</h3>
                                    <span>权威认证,安全便捷</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/hs1.png" alt="">
                                <div class="right">
                                    <h3>急速回收</h3>
                                    <span>不玩回收,玩腻换号</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/kf_01.png" alt="">
                                <div class="right">
                                    <h3>专属客服</h3>
                                    <span>1对1客服,优质服务</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/game.png" alt="">
                                <div class="right">
                                    <h3>精品账号</h3>
                                    <span>各种账号,应有尽有</span>
                                </div>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>

        <!-- 底部声明 -->
        <div class="site-info">
            <div class="layout-1226">
                <!-- 声明文字 -->
                <div>
                    <p>
                        <a href="javaScript:;">关于我们</a>
                        <span>|</span>
                        <a href="javaScript:;">联系我们</a>
                        <span>|</span>
                        <a href="javaScript:;">隐私政策</a>
                        <span>|</span>
                        <a href="javaScript:;">政务协议</a>
                        <span>|</span>
                        <a href="javaScript:;">帮助中心</a>
                    </p>
                    <p>
                        <a href="javaScript:;">备案号：xxxxxxxxxx</a>
                        <a href="javaScript:;">公司名称：江苏辉光网络科技有限公司</a>
                        <a href="javaScript:;">© 版权所有</a>
                    </p>
                </div>
            </div>
        </div>

    </div>
</body>

<script>
    // 个人中心内容切换
    var navListLis = document.querySelectorAll(".nav-list li");
    console.log(navListLis);
    var tabItems = document.querySelectorAll(".nav-content");
    var tabTitle = document.querySelector(".nav-title");
    // 注册事件
    for (let i = 0; i < navListLis.length; i++) {
        // 给每个li添加个data-index属性，为了对应上各自的内容
        navListLis[i].setAttribute("data-index", i);
        navListLis[i].onclick = function (e) {
            // 去掉其他li的current类名
            for (let i = 0; i < navListLis.length; i++) {
                navListLis[i].className = "";
            }
            // 设置自己的的current类名
            this.className = "current";
            // 获取当前模块li的data-index值
            var index = this.getAttribute("data-index");
            console.log(index);
            // 去掉其他模块内容的显示
            for (let i = 0; i < tabItems.length; i++) {
                tabItems[i].style.display = "";
            }
            tabTitle.innerHTML = e.target.innerHTML
            // 让自己的显示
            tabItems[index].style.display = "block";
        };
    }

    // 头像上传
    function preview(obj) {
        // 浏览器兼容性处理
        var file = obj.files[0];
        if (window.FileReader) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            // 监听文件读取结束后事件
            reader.onloadend = function (e) {
                document.getElementById("avatar").src = e.target.result;
            };
        }
    }

    // 表单校验
    // 获取我们想要应用自定义Bootstrap验证样式的所有表单
    var forms = document.getElementsByClassName('needs-validation');
    // 循环它们并防止提交
    var validation = Array.prototype.filter.call(forms, function (form) {
        form.addEventListener('submit', function (event) {
            if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
    });


    // 订单截图上传
    var container = document.getElementsByClassName('upload-files')[0]
        // 被隐藏的" 文件选择按钮 "
        var uploadInput = document.getElementById('upload-input')
        // 上传框
        var uploadDragger = document.getElementsByClassName('upload-dragger')[0]

        // 上传框点击触发"文件选择按钮"的点击
        uploadDragger.addEventListener('click', function(e) {
            uploadInput.click()
        })
        // 选中文件时
        uploadInput.addEventListener('change', function(e) {
            console.log(e.target.files)
            // 图片显示
            uploadPicture(e.target.files)
        })

        // 在 uploadDragger 内部有拖拽行为时
        uploadDragger.addEventListener('dragover', function(e) {
            // dragover 事件一定要清楚默认事件, 不然会无法触发后面的drop事件
            e.preventDefault()
            // console.log("over")
        })

        // 拖拽进入 uploadDragger 时
        uploadDragger.addEventListener('dragenter', function(e) {
            uploadDragger.classList.add('drag')
        })

        // 拖拽离开 uploadDragger 时
        uploadDragger.addEventListener('dragleave', function(e) {
            uploadDragger.classList.remove('drag')
        })

        // 拖拽松开时
        uploadDragger.addEventListener('drop', function(e) {
            // 禁止默认行为 (有些浏览器会在新页面预览图片) 
            e.preventDefault()
            console.log(e.dataTransfer.files)
            uploadDragger.classList.remove('drag')
            // 图片显示
            uploadPicture(e.dataTransfer.files)
        })

        function uploadPicture(files) {  
            for (let index = 0; index < files.length; index++) {
                // 检查是否为图片
                if( !/\.(png|jpg|jpeg|gif|PNG|JPG|JPEG|GIF)$/.test(files[index].name) ) {
                    alert('文件 ' + files[index].name + ' 上传错误, 文件格式必须为png|jpg|jpeg|gif')
                    continue
                }
                /**
                 * 上传操作(接口) 可以写在这里
                 */

                //  创建 img 元素
                var newimg = document.createElement('img')
                newimg.src = window.URL.createObjectURL(files[index])
                newimg.className = 'picture'
                // 在 container 的子元素 uploadDragger 前面插入 newimg 元素
                container.insertBefore(newimg, uploadDragger)
            }
        }
</script>

</html>